<template>
  <div>

    <div align="right">
      <el-button @click="clearFilter">清除所有过滤器</el-button>
      <el-input v-model="search"
                placeholder="请输入查询内容"
                style="width: 200px"
                @blur="searchfor"></el-input>
    </div>

    <el-table
        ref="filterTable"
        :data="tableData"
        border
        style="width: 100%">
      <!--    <el-table-column-->
      <!--        prop="date"-->
      <!--        label="日期"-->
      <!--        sortable-->
      <!--        width="180"-->
      <!--        column-key="date"-->
      <!--        :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"-->
      <!--        :filter-method="filterHandler"-->
      <!--    >-->
      <!--    </el-table-column>-->
      <el-table-column
          label="产品id"
          prop="id"
          width="70">
      </el-table-column>

      <el-table-column
          align="center"
          label="产品名"
          prop="name"
          width="150">
      </el-table-column>

      <el-table-column
          :filter-method="filterTag"
          :filters="typetages"
          filter-placement="bottom-end"
          label="产品类型"
          prop="typeid"
          width="100">
        <!--      添加状态色-->
        <template slot-scope="scope">
          <el-tag disable-transitions>
          <span v-for="type in types" v-show="type.id == scope.row.typeid">
            {{type.typename}}
          </span>
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
          label="产品规格"
          prop="size"
          width="100">
      </el-table-column>

      <el-table-column
          :formatter="formatter"
          label="产品简介"
          prop="description">
      </el-table-column>

      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">修改
          </el-button>
          <el-button
              v-if="scope.row.id>1"
              size="mini"
              type="danger" @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-pagination
        :page-size="pageSize"
        :total="total"
        background
        layout="prev, pager, next"
        @current-change="page">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      result:null,
      pageSize: 14,
      total: null,
      tableData: null,
      types:null,
      typetages:[],
      search:null,
      currentPage:1,
    }
  },created(){
    this.getTableData();
    axios.get('http://localhost:8081/producttype/findAll/1/' + this.pageSize).then(
        (response) => {
          this.types = response.data.content;
          for (const type of this.types) {
            const tage = {text: type.typename, value: type.id};
            this.typetages.push(tage);
          }
        }
    );
  },
  methods: {
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.description;
    },
    filterTag(value, row) {
      return row.typeid == value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] == value;
    },
    page(currentPage) {
      this.currentPage=currentPage;
      this.getTableData();
    },handleEdit(index, row) {
      this.$router.push({
        path:'/productupdate',
        query:{
          id:row.id,
        }
      })
    },
    handleDelete(index, row) {
      axios.get('http://localhost:8081/product/checkproduct/' + row.id).then(
          (response) => {
            if(response.data == ""){
              axios.get('http://localhost:8081/product/deleteById/' + row.id).then(
                  (response) => {
                    if(response.data == "success"){
                      this.getTableData();
                      this.success();
                    }else{
                      this.failed();
                    }
                  })
            }else{
              this.result=response.data;
              this.$confirm('该类型已与 '+this.result+' 有关联，是否继续删除?', '删除', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                axios.get('http://localhost:8081/product/deleteById/' + row.id).then(
                    (response) => {
                      if(response.data == "success"){
                        this.getTableData();
                        this.success();
                      }else{
                        this.failed();
                      }
                    })
              }).catch(() => {
                //什么也不做
              });
            }
          })

    },success() {
      this.$message({
        message: '修改成功!',
        type: 'success'
      });
    },
    failed() {
      this.$message.error('修改失败，请检查内容是否正确或稍后再试!');
    },
    getTableData() {
      if (this.search != null && this.search != "") {
        axios.get('http://localhost:8081/product/search/1/' + this.pageSize + "/" + this.search).then(
            (response) => {
              this.tableData = response.data.content;
              this.total = response.data.totalElements;
            }
        );
      } else if (this.currentPage != 1) {
        axios.get('http://localhost:8081/product/findAll/+' + this.currentPage + '/' + this.pageSize).then(
            (response) => {
              this.tableData = response.data.content;
              this.total = response.data.totalElements;
            }
        )
      } else {
        axios.get('http://localhost:8081/product/findAll/1/' + this.pageSize).then(
            (response) => {
              this.tableData = response.data.content;
              this.total = response.data.totalElements;
            }
        );
      };
    },
    searchfor(){
      this.currentPage=1;
      this.getTableData();
    },
  }
}
</script>